.myInfoPage{
    width: 380px;
    margin: 0 auto;
    padding: 30px;
    h1{
        font-size: 50px;
        text-align: center;
        font-family: 'NotoSansKR-Light';
        letter-spacing: -3.5px;
        margin-bottom: 20px;
    }
    .subTit{
        font-size: 22px;            
        color: #2e2efe;
        padding: 10px 0;
        margin:20px 0 30px 0;
        border-bottom: 3px solid #2e2efe;
        &.mt{
            margin-top: 60px;
        }
    }
    .info{
        font-size: 28px;
        font-family: 'NotoSansKR-Light';
        letter-spacing: -2px;
        line-height: 34px;
        color: #2e2efe;
        padding-bottom: 20px;
        b{
            font-family: 'NotoSansKR-Medium';
        }
    }
    ::v-deep .el-tabs__header{
        margin-bottom: 30px;
        .el-tabs__nav{
            width: 100%;
        }
        .el-tabs__item{
            width: 50%;
            padding: 0;
            font-size: 18px;
            font-family: 'NotoSansKR-Medium';
            height: 50px;
            line-height: 50px;
        }
        .el-tabs__active-bar{
            height: 4px;
            background-color: #2e2efe;
        }
    }
    ::v-deep .loginFrm{
        .el-form-item{
            margin-bottom: 20px;
            &:last-child{
                margin-bottom: 0;
            }
            .el-input__inner{
                font-size: 16px;
                border-radius: 0;
                border: 0;
                border-bottom: 1px solid #000;
                padding: 0;
            }
        }
        .el-button{
            border-radius: 0;
            font-family: 'NotoSansKR-Medium';
            &.minBtn{
                font-family: 'NotoSansKR-Regular';
            }
        }
        .el-checkbox__input{
            vertical-align: text-top;
            .el-checkbox__inner{
                width: 19px;
                height: 19px;
                background-color: #fff;
                border: 2px solid #000;
                &::after{
                    border: 2px solid #2e2efe;
                    border-left: 0;
                    border-top: 0;
                    width: 4px;
                    height: 9px;
                    left: 5px;
                    top: 2px;
                }
            }
        }               
    }
    .link{
        float: right;
    }
    .subBtn,.signBtn{
        display: block;
        width: 100%;
        margin-left: 0;
    }
    .subBtn{
        margin-bottom: 15px;
    }
    .other{
        display: block;
        padding: 15px 80px;
        box-sizing: border-box;
        text-align: left;
        font-size: 18px;
        font-family: 'NotoSansKR-Medium';
        border: 1px solid #bcbcbc;
        position: relative;
        &:hover{
            color: #2e2efe;
            border-color: #2e2efe;
        }
        &.type1{
            margin-bottom: 10px;
        }
        i{
            display: block;
            height: 20px;
            width: 60px;
            border-right: 1px solid #bcbcbc;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background-repeat: no-repeat;
            background-position: center;
            background-size: auto 100%;
            background-image: url(../../assets/images/login_type1.png);
        }
        &.type2 i{
            background-image: url(../../assets/images/login_type2.png);
        }
    }
    .minBtn{
        float: right;
        min-width: 90px;
        padding: 12px 8px;
        border-color: #2e2efe;
        color: #2e2efe;            
        &:hover:not(.is-disabled){
            background: #2e2efe;
            color: #fff;
        }
    }
    .forgotFrm{
        .subBtn{
            margin: 20px 0 0 0;
        } 
    }
    ::v-deep .updateFrm{
        margin-top: 40px;
        .el-form-item{
            margin-bottom: 30px;
        }
        .regName .el-input-group__append{
            padding: 0;
        }
        .el-form-item__label{
            line-height: 30px;
            padding: 0;
            color: #000;
        }
        .el-input.is-disabled .el-input__inner{
            background: #fff;
            color: #666;
            opacity: 1;
        }
        .el-radio-group{
            float: right;
            position: relative;
            &.not::after{
                content: '';
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
            }
            .el-radio{
                margin-right: 10px;
            }
            .el-radio-button .el-radio-button__inner{
                border-radius: 0;
                margin-left: 5px;
                border: 1px solid #2e2efe;
                color: #2e2efe;
            }
            .el-radio-button__orig-radio:checked + .el-radio-button__inner{
                color: #fff;
                background-color: #2e2efe;
            }
        }
        .el-select .el-input .el-select__caret{
            font-size: 20px;
            color: #000;
        }
        .el-icon-arrow-up:before{
            content: "\e78f";
        }
        .el-select .el-input.is-disabled{
            .el-input__inner{
                background: none;
                border-color: #b6b6b6;
            }
            .el-select__caret{
                color: #b6b6b6;
            }
        }
        .el-radio__input.is-disabled{
            &.is-checked{
                .el-radio__inner::after{
                    width: 9px;
                    height: 9px;
                    background-color: #000;
                }
            }
            .el-radio__inner{
                background-color: #fff;
                border-color: #d7d7d7;
            }
        }
        .el-checkbox__input.is-disabled{
            .el-checkbox__inner{
                border-color: #7a7a7a;
                &::after{
                    border-color: #7a7a7a;
                }
            }
        }
        .is-disabled{
            .el-link--inner{
                color: #7a7a7a;
            }                        
        }
        .minMrb{
            margin-bottom: 20px;
        }
        .rules{
            .item{
                height: 30px;
                line-height: 30px;
                padding-left: 20px;
                a{
                    margin-left: 10px;
                }
            }
            .times{
                height: 30px;
                .txt{
                    float: left;font-size: 13px;color: #C0C4CC;
                }
                .el-radio-group{
                    float: left;
                    margin-top: 6px;
                    .el-radio{
                        margin:0 0 0 10px;
                    }
                    .el-radio__label{
                        padding-left: 5px;
                    }
                }
            }
        }
        .dialogRule{
            .el-dialog{
                width: 660px;
            }
        }
        .el-dialog__header{
            padding-bottom: 0;
            h3{
                padding-bottom: 10px;
                border-bottom: 1px solid #2e2efe;
            }                
        }
        .el-dialog__body{
            padding: 20px 20px 0 20px;  
        }
        .dialogCon{                
            .con{
                width: 100%;
                height: 520px;
                overflow-x: auto;
                overflow-y: auto;
            }
        }
        .subBtn{
            margin: 20px 0 0 0;
        }
        .offBtn{
            background-color: #fff;
            color: #c0c4cc;
            border-color: #c0c4cc;
        }
        .selectBox{
            .s1{
                width:100%;
            }
            .s2{
                display: none;
                width:47%;
            }
            &.s{
                .s1{
                    width:47%;
                    margin-right:6%;
                }
                .s2{
                    display: inline-block;
                }
            }
        }
    } 
    .sucInfo{
        text-align: center;
        padding: 30px 0;
        img{
            width: 90px;
        }
        p{
            padding-top: 20px;
            font-size: 30px;
            font-family: 'NotoSansKR-Light';
            line-height: 40px;
            b{
                font-family: 'NotoSansKR-Medium';
            }
        }
    }
    .links{
        text-align: center;
        padding: 20px 0 80px 0;
        a{
            font-size: 16px;
            margin: 5px 0;
        }
    }
    .btns{
        button{
            width: 48%;
            font-size: 18px;
            border-radius: 0;
            &:first-child{
                color: #2e2efe;
                border-color: #2e2efe;
            }
            &:last-child{
                margin-left: 4%;
            }
        }
    }
    .forgotInfo{
        font-size: 28px;
        line-height: 40px;
        color: #2e2efe;
    }
    .userInfo{
        padding: 50px 0;
        font-size: 20px;
        line-height: 30px;
        color: #000;
        label{
            color: #2e2efe;
        }
        span{
            font-size: 16px;
            display: block;
            color: #929292;
        }
    }
}
@media (max-width: 768px){ 
    .myInfoPage{
        width: 92%;
        padding: 4%;
        h1{
            font-size: 28px;
            margin-bottom: 0;
        }
        .subTit{
            border-bottom-width: 2px;
            font-size: 18px;
            line-height: 20px;
            margin: 10px 0 20px 0;
            &.mt{
                margin-top: 40px;
            }
        }
        ::v-deep .updateFrm{
            margin-top: 20px;
            .el-form-item{
                margin-bottom: 20px;
                .el-input__inner{
                    font-size: 14px;
                }
            }
            .selectBox.s .s1,.selectBox.s .s2{
                width: 100%;
                margin-right: 0;
            }
            .minBtn{
                min-width: 70px;
            }
            .el-radio-group{
                .el-radio-button__inner{
                    padding: 12px 12px;
                }
            }
            .rules{
                .item{
                    height: auto;
                    padding-left: 15px;
                    &.times{
                        display: table;
                    }
                }
            }
        }
        .dialogRule{
            .el-dialog{
                width: 94%;
                .dialogCon .con{
                    height: 400px;
                }
            }
        }
    }
}